<template>
    <div class="selectClassTree">
        <el-card class="box-card">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>

            <div v-loading="loading">
                <div class="tree-box">
                    <el-tree
                        class="filter-tree"
                        @node-click="nodeClick"
                        :data="data"
                        :props="defaultProps"
                        default-expand-all
                        :expand-on-click-node="false"
                        :filter-node-method="filterNode"
                        ref="tree"
                        node-key="id"
                    >
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                            <el-dropdown trigger="click" @command="handleCommand">
                                <span class="saasIcon" @click.stop="syncMember(data)">&#xe60c;</span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="部门成员同步">部门成员同步</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </span>
                    </el-tree>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'selectDepartmentTree',
    props: ['schoolId'],
    data() {
        return {
            loading: true,
            data: [],
            filterText: '',
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            currentDepartment: '', //当前点击的部门
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        },
         schoolId(nval) {
            this.getClassTreeList(nval)
        },
    },
    async created() {
        await this.getClassTreeList();
    },
    methods: {
        // 获取部门树
        async getClassTreeList(schoolId) {
            this.loading = true
            const { code, data } = await this.$api.schoolConfig.educationalList.departmentTree({
                schoolId,
            })
            if (code === 200) {
                this.data = data ? [data] : []
            }
            this.loading = false
            return data
        },
        // 点击打开菜单
        syncMember(data) {
            this.currentDepartment = data
        },
        // 点击下拉选项触发
        async handleCommand(command) {
            switch (command) {
                case '部门成员同步':
                    const { cpDepartmentId, id } = this.currentDepartment
                    const { code, data } = await this.$api.schoolConfig.educationalList.departmentSyncMember({
                        cpDepartmentId,
                        schoolId: this.schoolId,
                    })
                    if (code === 200) {
                        this.$emit('filterDataByClass', { departmentId: id, schoolId: this.schoolId })
                        this.$notify.success('同步部门成员成功！')
                        this.$refs['tree'].setCurrentKey(id)
                    }
                    break
            }
        },
        // 点击节点触发
        nodeClick(data) {
            let params = JSON.parse(JSON.stringify(data))
            if (params.externalParentId === 0) {
                params.externalId = null
            }
            this.$utils.debounce(() => {
                this.$emit('filterDataByClass', { externalId: params.externalId, schoolId: this.schoolId })
            }, 200)
        },
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        // 取消当前高亮的节点 必须设置 node-key 属性 指定 id
        /*reset() {
            this.$refs.tree.setCurrentKey(null);
        },*/
    },
}
</script>
<style lang="scss" scoped>
.selectClassTree {
    width: 100%;
    height: 100%;
    .box-card{
        height: 100%;
    }
    .tree-box {
        margin-top: 10px;
        overflow: auto;
        height: calc(100vh - 177px);

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;

            .saasIcon {
                font-size: 15px;
                color: #ccc;
            }
        }
    }
}
</style>
